<template>
	<view class="cu-w-100 cu-px-20 cu-bg-main cu-pt-20 cu-pb-40 cu-shadow-lg" style="border-radius: 10rpx;">
		<u-empty :text="text ? text :''" :text-color="color ? color : '#B2B2B2'" :text-size="textSize ? textSize : 28"
			:icon="icon ? '/static/images/empty/' + icon + '.png': ''" :width="width ? width : 300"
			:height="height ? height : 300">
		</u-empty>
		<block v-if="button">
			<view class="cu-w-100 cu-px-20 cu-pt-20">
				<u-button @click="event('btnClick',button)" :size="button.size ? button.size : 'mini' "
					:shape="button.shape ? button.shape : 'circle' " :text="button.text ? button.text : '按钮'"
					:color="button.color ? button.color : 'linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))'"
					:customStyle="button.customStyle ? button.customStyle : undefined"></u-button>
			</view>
		</block>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		/* 
		---------------------------------------------------------------------------------------
		emits
		---------------------------------------------------------------------------------------
		属性						类型								描述					默认值		-
		btnClick				function						底部按钮点击事件					-				
		---------------------------------------------------------------------------------------
		---------------------------------------------------------------------------------------
		slots
		---------------------------------------------------------------------------------------
		属性						类型								描述					默认值		-
		default					slot							默认					-				
		---------------------------------------------------------------------------------------
		props
		---------------------------------------------------------------------------------------
		属性						类型								描述					默认值
		text					string							描述					-
		color					string							颜色					#B2B2B2
		textSize				number							描述字体大小			28
		icon					string							图标					-
		width					number							宽度					300
		height					number							高度					300
		button					object							底部button
		  |-size				string							字体大小				mini
		  |-shape				string							是否圆角				circle
		  |-text				string							描述					按钮
		  |-color				string							背景色				linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))
		  |-customStyle			object							自定义CSS样式		{}
		*/
		emits: ['btnClick'],
		props: {
			text: {
				type: String,
				default: function(e) {
					return ''
				}
			},
			color: {
				type: String,
				default: function(e) {
					return '#B2B2B2'
				}
			},
			textSize: {
				type: Number,
				default: function(e) {
					return 28
				}
			},
			icon: {
				type: String,
				default: function(e) {
					return ''
				}
			},
			width: {
				type: Number,
				default: function(e) {
					return 300
				}
			},
			height: {
				type: Number,
				default: function(e) {
					return 300
				}
			},
			button: {
				type: Object,
				default: function(e) {
					return undefined
				}
			},
		},
		data() {
			return {};
		},
		methods: {
			event(type, data) {
				if(type === 'btnClick'){
					this.$emit('btnClick',data)
				}
			}
		}
	}
</script>

<style lang="scss">

</style>